import { Card, Space, Table, Tag ,Form , Input , Button,Select} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {changeCate1Id,changeCate2Id, changeCate3Id ,getCateGory1Sync , useSelectorAttrLlist} from '@/store/slices/attr'
import { useAppDispatch } from '@/hooks';
import React,{useEffect} from 'react';


const App: React.FC = () => {
	const dispatch = useAppDispatch();
  const {category1Id,category2Id,category3Id,category1List,category2List,category3List} = useSelectorAttrLlist()
  
  const { Option } = Select;
  // 一级菜单数据遍历
  const children1: React.ReactNode[] = [];
  for (let i = 0; i < category1List.length; i++) {
    children1.push(<Option value={category1List[i].id} key={i+1}>{category1List[i].name}</Option>);
  }
  // 二级菜单数据遍历
  let children2: React.ReactNode[] = [];
  for (let i = 0; i < category2List.length; i++) {
    children2.push(<Option value={category2List[i].id} key={i+1}>{category2List[i].name}</Option>);
  }
  // 三级遍历
  let children3: React.ReactNode[] = [];
  for (let i = 0; i < category3List.length; i++) {
    children3.push(<Option key={i+1} value={category3List[i].id}>{category3List[i].name}</Option>);
  }
  // 点击一级
  const onChangeLeval1=async(value:any)=>{
    console.log(value)
    await dispatch(changeCate1Id(value))
    children2=[]
    children3=[]
  }
  // 点击二级
  const onChangeLeval2=async(value:any)=>{
    console.log(value)
    await dispatch(changeCate2Id(value))
    children3=[]
  }
  // 点击三级
  const onChangeLeval3=async(value:any)=>{
    console.log(value)
    await dispatch(changeCate3Id(category1Id,category2Id,value))
  }
	useEffect(()=>{
		dispatch(getCateGory1Sync())
	},[])
	return(
		<div>
			<Card>
				<Form
						layout="inline"
						// labelCol={{ span: 3 }}
						// wrapperCol={{ span: 8 }}
            //   {...formItemLayout}
            //   layout={formLayout}
            //   form={form}
            //   initialValues={{ layout: formLayout }}
            //   onValuesChange={onFormLayoutChange}
            >
						<Form.Item label="一级分类">
							<Select value={category1Id||"请选择"} onChange={onChangeLeval1} style={{ width: 200 }}>
								{children1}
							</Select>
						</Form.Item>
						<Form.Item label="二级分类">
              <Select value={category2Id||"请选择"} onChange={onChangeLeval2}  style={{ width: 200 }}>
								{children2}
							</Select>
						</Form.Item>
						<Form.Item label="三级分类">
              <Select value={category3Id||"请选择"} onChange={onChangeLeval3} style={{ width: 200 }}>
								{children3}
							</Select>
						</Form.Item>
				</Form>
			</Card>
		</div>
	)
};

export default App;